<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>count的值: {{count}}</h1>
        <h1>count是: {{msg}}</h1>
        <h1>count 计算属性：{{message}} </h1>

        <button @click="changeCount">点击修改 count 值</button>

        <hr>
        <h1 @click="name='老王'">
            {{ name }}
        </h1>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                count: 1,
                msg: '奇数',
                name: '老吴'
            }
        },
        methods: {
            changeCount() {
                // console.log(Math.floor(Math.random() * 2));
                this.count = Math.floor(Math.random() * 2)

                // 手动调用修改 msg
                this.changeMsg()
            },
            changeMsg() {

                console.log('函数被调用了');
                this.msg = this.count == 0 ? '偶数' : '奇数'
            }
        },
        // computed 是计算属性选项
        computed: {
            message() {
                console.log('计算属性被调用了' + this.name);
                // 通过计算属性进行计算结果

                /*
                    只有当 this.count 的值发生改变的时候，才会执行 message 函数进行计算
                    如果当前值和上一次的值相同，该方法就不会被执行，也相当于 this.count 被
                    监听了(被缓存了)。
                    1、 计算属性是会缓存值
                    2、 计算属性一上来就会立即执行一次(非惰性)
                    3、 如果计算属性中使用到了多个属性，那么这些属性全部都会被缓存，只要有一个发生
                        变化，那么该函数就会被重新执行，写在计算属性中的所有属性都会被监听(缓存)
                    4、 计算属性中一定要有一个 return ，因为要有一个计算的结果
                    5、 计算属性是多个值影响一个值
                    6、 计算属性不支持异步
                */

                // setTimeout(() => {
                return this.count == 0 ? '偶数' : '奇数'
                // })

            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>